<script setup lang="ts" name="purchaseProduct">
import { getListByConditionsWithPage, urls } from '@/index';
import type {
  DialogModel,
  DrawerModel,
  PurchaseProduction,
  PurchaseProductionQueryCondition
} from '@/index.d';
import { useRequest } from 'vue-request';
import ProductionDetailDialog from './ProductionDetailDialog.vue';
import ProductionFlowDraw from './ProductionFlowDraw.vue';
const title = '采购产品信息';
const queryCondition = reactive<PurchaseProductionQueryCondition>({
  deleted: false,
  change: false,
  currentPage: 1,
  pageSize: 20
});

const resetQueryCondition = () => {
  queryCondition.currentPage = 1;
  queryCondition.pageSize = 20;
  queryCondition.deleted = false;
  delete queryCondition.partType;
  delete queryCondition.partStatus;
  delete queryCondition.productionReference;
  delete queryCondition.partName;
  delete queryCondition.partReference;
  delete queryCondition.supplierName;
};

const {
  data: getPurchasePartListData,
  run: getPurchasePartListRun,
  loading: getPurchasePartListLoading
} = useRequest(() => getListByConditionsWithPage(urls.purchaseProduction, queryCondition));

const handleResetQuery = () => {
  resetQueryCondition();
  getPurchasePartListRun();
};

const detailDialogModel = reactive<DialogModel<PurchaseProduction>>({
  visible: false,
  title,
  type: 'view',
  id: 0,
  change: false
});

const productionFlowDrawModel = reactive<DrawerModel<PurchaseProduction>>({
  visible: false,
  type: 'view',
  id: 0,
  change: false,
  title: ''
});

const viewProducationFlow = (row: PurchaseProduction) => {
  productionFlowDrawModel.id = row.id as number;
  productionFlowDrawModel.title = '';
  productionFlowDrawModel.data = row;
  productionFlowDrawModel.visible = true;
};

watch(
  () => detailDialogModel.visible,
  (value: boolean) => {
    if (!value && detailDialogModel.change) {
      getPurchasePartListRun();
      detailDialogModel.change = false;
    }
  }
);
</script>
<template>
  <HqContainerTable
    :base-url="urls.ndeReportReviewRecord"
    :title="title"
    :loading="getPurchasePartListLoading"
    :total="getPurchasePartListData?.total"
    :table-data="getPurchasePartListData?.records"
    v-model:pageSize="queryCondition.pageSize"
    v-model:current-page="queryCondition.currentPage"
    @handle-query="getPurchasePartListRun"
    @handle-reset-query="handleResetQuery"
    @handle-reload="getPurchasePartListRun"
    v-model:detail-dialog-model="detailDialogModel"
    :operate-column="true"
  >
    <template #search>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.partType"
          placeholder="请选择工件类型"
          clearable
          @change="getPurchasePartListRun"
        >
          <el-option label="锻件" value="锻件" />
          <el-option label="板材" value="板材" />
          <el-option label="其它" value="其它" />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.partStatus"
          placeholder="请选择工件状态"
          clearable
          @change="getPurchasePartListRun"
        >
          <el-option label="进行" value="进行" />
          <el-option label="完成" value="完成" />
          <el-option label="取消" value="取消" />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.supplierName"
          @change="getPurchasePartListRun"
          placeholder="请选择供应商"
          filterable
          clearable
        >
          <HqRelationOptions />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-input
          v-model.trim="queryCondition.productionReference"
          placeholder="请输入生产令号"
          @keydown.enter="getPurchasePartListRun"
          @clear="getPurchasePartListRun"
          clearable
        />
      </hq-col>

      <hq-col kind="search">
        <el-input
          v-model.trim="queryCondition.partName"
          placeholder="请输入工件名称"
          @keydown.enter="getPurchasePartListRun"
          @clear="getPurchasePartListRun"
          clearable
        />
      </hq-col>
      <hq-col kind="search">
        <el-input
          v-model.trim="queryCondition.partReference"
          placeholder="请输入工件编号"
          @keydown.enter="getPurchasePartListRun"
          @clear="getPurchasePartListRun"
          clearable
        />
      </hq-col>
    </template>

    <template #tableColumns>
      <HqTableColumn label="查看进度" :min-width="100">
        <template #default="{ row }">
          <el-button link type="success" size="default" @click="viewProducationFlow(row)">
            查看进度
          </el-button>
        </template>
      </HqTableColumn>
      <HqTableColumn label="生产令号" prop="productionReference" :min-width="150" sortable />
      <HqTableColumn label="工件名称" prop="partName" :min-width="200" sortable />
      <HqTableColumn label="工件编号" prop="partReference" :min-width="150" sortable />
      <HqTableColumn label="最新消息" prop="latestStatus" :min-width="200" sortable />
      <HqTableColumn label="更新日期" prop="latestStatusDate" :min-width="100" sortable />
      <HqTableColumn label="工件类型" prop="partType" :min-width="100" sortable />
      <HqTableColumn label="当前状态" :min-width="100">
        <template #default="{ row }">
          <el-text type="success" v-if="row.partStatus === '进行'"> {{ row.partStatus }}</el-text>
          <el-text type="primary" v-if="row.partStatus === '完成'"> {{ row.partStatus }}</el-text>
          <el-text type="danger" v-if="row.partStatus === '取消'"> {{ row.partStatus }}</el-text>
        </template>
      </HqTableColumn>
      <HqTableColumn label="供应商名称" prop="supplierName" :min-width="200" sortable />
      <!-- <HqTableColumn label="签订合同日期" prop="signDate" :min-width="150" /> -->
      <!-- <HqTableColumn label="要求完成日期" prop="requiredDate" :min-width="150" /> -->
      <!-- <HqTableColumn label="实际完成日期" prop="finishedDate" :min-width="150" /> -->
    </template>
  </HqContainerTable>
  <ProductionDetailDialog
    v-model:dialog-model="detailDialogModel"
    v-if="detailDialogModel.visible"
  />
  <ProductionFlowDraw
    v-model:drawer-model="productionFlowDrawModel"
    v-if="productionFlowDrawModel.visible"
  />
</template>
<style lang="scss" scoped></style>
